<template>
  <div>
    <div style="margin-top: 3%;">
      <el-form :inline="true" ref="form" label-width="100px">
        <el-form-item label="表单名称">
          <el-select v-model="searchParams.resourceTypeTbale" placeholder="请选择资表单名称" @change="handleResourceTypeChange">
            <el-option label="新区云平台硬件台账" value="Yjybz"></el-option>
            <el-option label="新区云平台硬件检修台账" value="Yjjxybz"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="全局搜索">
          <el-input placeholder="请输入关键字名称" v-model="searchParams.resource_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetAndFetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCreate">新建</el-button>
        </el-form-item>
        <el-button @click="exportAllToExcel">导出数据</el-button>
      </el-form>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @before-close="closeDialog">
      <el-form :label-position="'left'" label-width="120px" :model="formData" :rules="formRules" ref="form">
        <!-- 动态渲染表单字段 -->
        <template v-if="searchParams.resourceTypeTbale === 'Yjybz'">
          <el-row :gutter="20"> <!-- gutter 是列之间的间距 -->
            <el-col :span="12">
              <el-form-item label="设备厂家" prop="manufacturer">
                <el-input v-model="formData.manufacturer" style="width: 100%;" placeholder="华为/新华三/超聚变"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备型号" prop="model">
                <el-input v-model="formData.model" style="width: 100%;" placeholder="设备型号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否国产化" prop="architecture">
                <el-input v-model="formData.architecture" style="width: 100%;" placeholder="ARM/X86"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="节点类型" prop="node_type">
                <el-input v-model="formData.node_type" style="width: 100%;" placeholder="计算/存储/管理"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="维保开始时间" prop="maintenance_start">
                <el-date-picker type="date" placeholder="维保-开始" v-model="formData.maintenance_start"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="维保结束时间" prop="maintenance_end">
                <el-date-picker type="date" placeholder="维保-结束" v-model="formData.maintenance_end"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="内/外网" prop="network_zone">
                <el-input v-model="formData.network_zone" style="width: 100%;" placeholder="内/外网"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维保剩余（天）" prop="maintenance_remaining_days">
                <el-input v-model="formData.maintenance_remaining_days" style="width: 100%;"
                  placeholder="维保剩余天数"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="在保/过保" prop="warranty_status">
                <el-input v-model="formData.warranty_status" style="width: 100%;" placeholder="在保/过保"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在机房" prop="data_center">
                <el-input v-model="formData.data_center" style="width: 100%;" placeholder="所在机房"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机柜" prop="rack">
                <el-input v-model="formData.rack" style="width: 100%;" placeholder="机柜"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始(U)" prop="start_u">
                <el-input v-model="formData.start_u" style="width: 100%;" placeholder="起始(U)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="终止(U)" prop="end_u">
                <el-input v-model="formData.end_u" style="width: 100%;" placeholder="终止(U)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主机名称" prop="hostname">
                <el-input v-model="formData.hostname" style="width: 100%;" placeholder="主机名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主机ID" prop="host_id">
                <el-input v-model="formData.host_id" style="width: 100%;" placeholder="主机ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="集群/主机组" prop="cluster_group">
                <el-input v-model="formData.cluster_group" style="width: 100%;" placeholder="集群/主机组"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="管理地址" prop="management_ip">
                <el-input v-model="formData.management_ip" style="width: 100%;" placeholder="管理地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="BMC地址" prop="bmc_ip">
                <el-input v-model="formData.bmc_ip" style="width: 100%;" placeholder="BMC地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="CPU核心" prop="cpu_cores">
                <el-input v-model="formData.cpu_cores" style="width: 100%;" placeholder="CPU核心"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内存" prop="memory_mb">
                <el-input v-model="formData.memory_mb" style="width: 100%;" placeholder="内存"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="硬盘" prop="disk">
                <el-input v-model="formData.disk" style="width: 100%;" placeholder="硬盘"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备SN" prop="device_sn">
                <el-input v-model="formData.device_sn" style="width: 100%;" placeholder="设备SN"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="对端交换机名称" prop="peer_switch_name_1">
                <el-input v-model="formData.peer_switch_name_1" style="width: 100%;" placeholder="对端交换机名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对端接口" prop="peer_interface_1">
                <el-input v-model="formData.peer_interface_1" style="width: 100%;" placeholder="对端接口"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="对端交换机名称2" prop="peer_switch_name_2">
                <el-input v-model="formData.peer_switch_name_2" style="width: 100%;" placeholder="对端交换机名称2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对端接口2" prop="peer_interface_2">
                <el-input v-model="formData.peer_interface_2" style="width: 100%;" placeholder="对端接口2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="formData.remarks" style="width: 100%;" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-if="searchParams.resourceTypeTbale === 'Yjjxybz'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="柜位" prop="cabinet_position">
                <el-input v-model="formData.cabinet_position" style="width: 100%;" placeholder="柜位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备起始高度" prop="start_height_u">
                <el-input v-model="formData.start_height_u" style="width: 100%;" placeholder="设备起始高度(U)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备终止高度" prop="end_height_u">
                <el-input v-model="formData.end_height_u" style="width: 100%;" placeholder="设备终止高度(U)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障时间" prop="fault_time">
                <el-date-picker type="date" placeholder="检修完成时间" v-model="formData.fault_time"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备SN" prop="device_sn">
                <el-input v-model="formData.device_sn" style="width: 100%;" placeholder="设备SN"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备BMC" prop="device_bmc">
                <el-input v-model="formData.device_bmc" style="width: 100%;" placeholder="设备BMC"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主机名称" prop="host_name">
                <el-input v-model="formData.host_name" style="width: 100%;" placeholder="主机名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对应I6000名称" prop="i6000_name">
                <el-input v-model="formData.i6000_name" style="width: 100%;" placeholder="对应I6000名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="更换备件" prop="replacement_part">
                <el-input v-model="formData.replacement_part" style="width: 100%;" placeholder="更换备件"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障备件槽位" prop="pre_replacement_sn">
                <el-input v-model="formData.pre_replacement_sn" style="width: 100%;" placeholder="故障备件槽位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="更换前序列号" prop="post_replacement_sn">
                <el-input v-model="formData.post_replacement_sn" style="width: 100%;" placeholder="更换前序列号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更换后序列号" prop="replacement_status">
                <el-input v-model="formData.replacement_status" style="width: 100%;" placeholder="更换后序列号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="检修时间" prop="inspection_time">
                <el-input v-model="formData.inspection_time" style="width: 100%;" placeholder="检修时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备件到货情况" prop="spare_parts_arrival">
                <el-input v-model="formData.spare_parts_arrival" style="width: 100%;" placeholder="备件到货情况"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="检修完成时间" prop="inspection_completed_at">
                <el-date-picker type="date" placeholder="检修完成时间" v-model="formData.inspection_completed_at"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="formData.remarks" style="width: 100%;" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>

    <div style="margin: 2%;width: 96%; overflow-x: auto;">
      <el-table :data="listData" border :style="tableStyle">
        <el-table-column v-for="column in displayedColumns" :key="column.prop" :prop="column.prop" :label="column.label"
          v-if="column.visible && column.prop !== 'operation'" :show-overflow-tooltip="true"
          :min-width="column.minWidth || '150px'" :max-width="column.maxWidth" sortable>
        </el-table-column>
        <!-- 操作列特殊处理，始终保持显示 -->
        <el-table-column label="操作" :min-width="'150px'" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="DeleteInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-pagination">
      <el-pagination style="margin: 30px 0px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="perPage"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      listData: [], // 存储列表数据
      searchParams: {
        //  name: '', // 名称搜索参数
        resource_name: '', // 模糊搜索关键字
        resourceTypeTbale: 'Yjybz', // 设置默认值
      },
      currentPage: 1, // 当前页码
      perPage: 10, // 每页数量
      total: 0, // 总条数
      displayedColumns: [], // 动态设置表格列
      //新建表单相关参数
      dialogVisible: false,
      //编辑对话框
      dialogTitle: '新增数据', // 根据场景动态改变
      isCreating: true, // 新增时为true，编辑时为false

      resourceTypeTbale: '',
      dialogTitle: '',
      formData: {},
      formRules: {
        // 定义表单验证规则
        manufacturer: [
          { required: true, message: '设备不能为空', trigger: 'change' }
        ],
        model: [
          { required: true, message: '设备型号不能为空', trigger: 'change' }
        ],
        architecture: [
          { required: true, message: '是否国产化不能为空', trigger: 'change' }
        ],
        node_type: [
          { required: true, message: '节点类型不能为空', trigger: 'change' }
        ],
        network_zone: [
          { required: true, message: '内/外网不能为空', trigger: 'change' }
        ],
        maintenance_start: [
          { required: true, message: '时间不能为空', trigger: 'change' }
        ],
        maintenance_end: [
          { required: true, message: '时间不能为空', trigger: 'change' }
        ],
        maintenance_remaining_days: [
          { required: true, message: '维保剩余时间不能为空', trigger: 'change' }
        ],
        warranty_status: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        data_center: [
          { required: true, message: '所在机房不能为空', trigger: 'change' }
        ],
        rack: [
          { required: true, message: '机柜不能为空', trigger: 'change' }
        ],
        start_u: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        end_u: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        hostname: [
          { required: true, message: '主机名称不能为空', trigger: 'change' }
        ],
        host_id: [
          { required: true, message: '主机ID不能为空', trigger: 'change' }
        ],
        cluster_group: [
          { required: true, message: '集群/主机组不能为空', trigger: 'change' }
        ],
        management_ip: [
          { required: true, message: '管理地址不能为空', trigger: 'change' }
        ],
        bmc_ip: [
          { required: true, message: 'BMC地址不能为空', trigger: 'change' }
        ],
        cpu_cores: [
          { required: true, message: 'CPU核心不能为空', trigger: 'change' }
        ],
        memory_mb: [
          { required: true, message: '内存不能为空', trigger: 'change' }
        ],
        disk: [
          { required: true, message: '硬盘不能为空', trigger: 'change' }
        ],
        //硬件检查表单验证规则
        cabinet_position: [
          { required: true, message: '柜位不能为空', trigger: 'change' }
        ],
        start_height_u: [
          { required: true, message: '设备起始高度不能为空', trigger: 'change' }
        ],
        end_height_u: [
          { required: true, message: '设备终止高度不能为空', trigger: 'change' }
        ],
        fault_time: [
          { required: true, message: '故障时间不能为空', trigger: 'change' }
        ],
        device_sn: [
          { required: true, message: '设备SN不能为空', trigger: 'change' }
        ],
        device_bmc: [
          { required: true, message: '设备BMC不能为空', trigger: 'change' }
        ],
        host_name: [
          { required: true, message: '主机名称不能为空', trigger: 'change' }
        ],
        i6000_name: [
          { required: true, message: 'I6000名称不能为空', trigger: 'change' }
        ],
        replacement_part: [
          { required: true, message: '更换备件不能为空', trigger: 'change' }
        ],
        pre_replacement_sn: [
          { required: true, message: '故障备件槽位不能为空', trigger: 'change' }
        ],
        post_replacement_sn: [
          { required: true, message: '更换前序列号不能为空', trigger: 'change' }
        ],
        replacement_status: [
          { required: true, message: '更换后序列号不能为空', trigger: 'change' }
        ],
        inspection_time: [
          { required: true, message: '检修时间不能为空', trigger: 'change' }
        ],
        spare_parts_arrival: [
          { required: true, message: '备件到货情况不能为空', trigger: 'change' }
        ],
        inspection_completed_at: [
          { required: true, message: '检修完成时间不能为空', trigger: 'change' }
        ],
      },
      tableStyle: {
        width: '100%',
        tableLayout: 'auto',
      },
    };
  },

  methods: {
    fetchData() {
      axios.get('/api/yjybz/search_ybz', {
        params: {
          //   name: this.searchParams.name,
          resource_name: this.searchParams.resource_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          page: this.currentPage,
          per_page: this.perPage,
        }
      }).then(response => {
        this.listData = response.data.data;
        this.total = response.data.meta.total || 0; // 确保total有默认值
      }).catch(error => {
        console.error("Error fetching data:", error);
      });
    },
    //编辑
    edit(row) {
      this.dialogTitle = '编辑数据'; // 更改对话框标题
      this.isCreating = false; // 设置为编辑模式
      this.formData = { ...row }; // 填充表单数据，深拷贝避免引用问题
      this.dialogVisible = true; // 显示对话框
    },

    DeleteInfo(row) {
      console.log('Row Data:', row);
      this.showConfirmDeleteDialog(row);
    },

    // 新增方法：显示确认删除对话框
    showConfirmDeleteDialog(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行删除操作
        this.deleteData(row);
      }).catch(() => {
        // 用户点击取消，不执行任何操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 删除数据的方法
    async deleteData(row) {
      try {
        // 调用后端删除API
        axios.delete(`/api/yjybz/ybzDelete`, {
          params: {
            resourceTypeTbale: this.searchParams.resourceTypeTbale,
            id: row.id
          }
        }); // 假设row.id是需要删除的数据的ID
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 刷新表格数据，具体实现取决于你的数据获取和更新逻辑
        this.fetchData(); // 假设这是你用来刷新列表数据的方法
      } catch (error) {
        console.error('删除失败:', error);
        this.$message.error('删除失败，请重试！');
      }
    },

//新建表单相关设置
handleCreate() {
  this.resourceTypeTbale = this.searchParams.resourceTypeTbale; // 根据你的逻辑设置不同的类型
  this.dialogTitle = '新增数据';
  this.formData = {}; // 重置表单数据
  this.isCreating = true;
  this.dialogVisible = true;
},

//编辑功能
submitForm() {
  this.$refs['form'].validate((valid) => { // 验证表单
    if (valid) {
      console.log(this.isCreating);
      if (this.isCreating) {
        // 发送 POST 请求到后端 API
        axios.post('/api/yjybz/ybzCurd', {
          resourceTypeTbale: this.resourceTypeTbale,
          ...this.formData
        }).then(response => {
          this.dialogVisible = false;
          // 处理成功响应
          this.$message({
            message: '资源创建成功',
            type: 'success'
          });
        }).catch(error => {
          // 处理错误响应
          this.$message({
            message: '创建资源失败: ' + error.response.data.message,
            type: 'error'
          });
        });
      } else {
        axios.put(`/api/yjybz/ybzEdit`, {
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          ...this.formData
        }, this.formData)
          .then(response => {
            this.$message.success('编辑成功');
            this.dialogVisible = false; // 关闭对话框
            this.fetchData(); // 刷新数据列表
          })
          .catch(error => {
            this.$message.error('编辑失败');
            console.error('编辑请求出错:', error);
          });
      }
    } else {
      return false;
    }
  });
},

//关闭编辑对话框
closeDialog() {
  this.dialogVisible = false;
  this.formData = {}; // 重置表单数据
  this.isCreating = true; // 重置为新增模式
  // 其他可能需要的清理操作
},

//----------------分页相关
handleCurrentChange(val) {
  this.currentPage = val;
  this.fetchData();
},
handleSizeChange(size) {
  this.perPage = size;
  this.currentPage = 1;
  this.fetchData();
},
resetSearch() {
  const currentResourceType = this.searchParams.resourceTypeTbale; // 保存当前的 resourceTypeTbale
  // this.searchParams = { name: '', resource_name: '', resourceTypeTbale: currentResourceType};
  this.searchParams = { resource_name: '', resourceTypeTbale: currentResourceType };
  this.currentPage = 1;
  this.fetchData();
},
resetForm() {
  this.$refs.form.resetFields();
},
resetAndFetchData() {
  // 重置分页参数并重新查询
  this.currentPage = 1;
  this.fetchData();
},

clearAllFormData() {
  // 假设formData包含所有表单项数据
  const defaultValues = {}; // 定义一个对象来存储各字段的默认值，如果需要特定的默认值可在此定义
  for (const key in this.formData) {
    if (this.formData.hasOwnProperty(key)) {
      // 根据字段类型设置合理的默认值
      // 这里简单地设置为空字符串，根据实际情况调整
      this.formData[key] = typeof this.formData[key] === 'string' ? '' : null;
      // 或者使用预定义的默认值
      // this.formData[key] = defaultValues[key] || '';
    }
  }
},
handleResourceTypeChange() {
  this.searchParams.resource_name = '';
  this.currentPage = 1;
  this.updateColumns();
  this.fetchData(); // 请求后端数据
  this.clearAllFormData();
},
updateColumns() {
  const resourceType = this.searchParams.resourceTypeTbale;
  if (resourceType === 'Yjybz') {
    this.availableColumns = [
      { prop: 'manufacturer', label: '设备厂家' },
      { prop: 'model', label: '设备型号' },
      { prop: 'architecture', label: '是否国产化' },
      { prop: 'node_type', label: '节点类型' },
      { prop: 'network_zone', label: '内/外网' },
      { prop: 'maintenance_start', label: '维保-开始' },
      { prop: 'maintenance_end', label: '维保-结束' },
      { prop: 'maintenance_remaining_days', label: '维保剩余（天）' },
      { prop: 'warranty_status', label: '在保/过保' },
      { prop: 'data_center', label: '所在机房' },
      { prop: 'rack', label: '机柜' },
      { prop: 'start_u', label: '起始(U)' },
      { prop: 'end_u', label: '终止(U)' },
      { prop: 'hostname', label: '主机名称' },
      { prop: 'host_id', label: '主机ID' },
      { prop: 'cluster_group', label: '集群/主机组' },
      { prop: 'management_ip', label: '管理地址' },
      { prop: 'bmc_ip', label: 'BMC地址' },
      { prop: 'cpu_cores', label: 'CPU核心' },
      { prop: 'memory_mb', label: '内存' },
      { prop: 'disk', label: '硬盘' },
      { prop: 'device_sn', label: '设备SN' },
      { prop: 'peer_switch_name_1', label: '对端交换机名称' },
      { prop: 'peer_interface_1', label: '对端接口' },
      { prop: 'peer_switch_name_2', label: '对端交换机名称2' },
      { prop: 'peer_interface_2', label: '对端接口2' },
      { prop: 'remarks', label: '备注' },
    ];
  } else if (resourceType === 'Yjjxybz') {
    this.availableColumns = [
      { prop: 'cabinet_position', label: '柜位' },
      { prop: 'start_height_u', label: '设备起始高度(U)' },
      { prop: 'end_height_u', label: '设备终止高度(U)' },
      { prop: 'fault_time', label: '故障时间' },
      { prop: 'device_sn', label: '设备SN' },
      { prop: 'device_bmc', label: '设备BMC' },
      { prop: 'host_name', label: '主机名称' },
      { prop: 'i6000_name', label: '对应I6000名称' },
      { prop: 'replacement_part', label: '更换备件' },
      { prop: 'pre_replacement_sn', label: '故障备件槽位' },
      { prop: 'post_replacement_sn', label: '更换前序列号' },
      { prop: 'replacement_status', label: '更换后序列号' },
      { prop: 'inspection_time', label: '检修时间' },
      { prop: 'spare_parts_arrival', label: '备件到货情况' },
      { prop: 'inspection_completed_at', label: '检修完成时间' },
      { prop: 'remarks', label: '备注' },
    ];
  }
  this.displayedColumns = this.availableColumns.map(column => ({ ...column, visible: true }));
},

init() {
  this.updateColumns();
  this.fetchData();
},
exportAllToExcel() {
  axios.get('/api/yjybz/search_ybz', {
    params: {
      //name: this.searchParams.name,
      resource_name: this.searchParams.resource_name,
      resourceTypeTbale: this.searchParams.resourceTypeTbale,
      // 请求所有数据
      page: 1,
      per_page: this.total,
    }
  }).then(response => {
    const allData = response.data.data;

    // 构建表头
    const headers = this.displayedColumns.filter(column => column.visible).map(column => column.label);
    const props = this.displayedColumns.filter(column => column.visible).map(column => column.prop);

    // 构建数据
    const data = allData.map(row => props.map(prop => row[prop]));

    // 添加表头到数据
    data.unshift(headers);

    // 创建工作簿
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 导出 Excel 文件
    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');
  }).catch(error => {
    console.error("Error fetching all data:", error);
  });
}
  },
mounted() {
  this.init();
}
};


</script>

<style>
.bottom-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* from 表单样式 */
.el-dialog {
  width: 800px;
  /* 自定义宽度 */
  max-width: 90%;
  /* 保持最大宽度限制，可选 */
  margin-top: 10vh !important;
  /* 调整垂直位置，使对话框居中显示，！important用于覆盖可能的默认样式 */
}

/* 如果需要调整对话框内容区域的大小，可以添加如下样式 */
.el-dialog__body {
  padding: 20px 50px;
  /* 可根据需要调整内边距 */
}

.el-dialog__footer {
  text-align: center;
  /* 按钮居中对齐 */
  /* display: flex; */
  justify-content: center;
  /* 适用于弹性布局，确保按钮在水平方向上居中 */
  align-items: center;
  /* 垂直居中，如果只需要水平居中，这行可以省略 */
  height: 90px;
  /* 自定义底部高度，根据需要调整 */
  /* padding-bottom: 30; 移除默认的内边距，如果有需要的话 */
}

/* 表格表头样式 */
.el-table th .cell {
  white-space: nowrap;
  overflow: visible;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
</style>
